
import React, {Fragment} from "react";
import {Alert, Form, Input, Select} from 'antd';
import Store from "./Store";
import {observer} from "mobx-react";

@observer
class IndexConfig extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    handleTableFieldChange = selectedItems => {
        console.log(selectedItems);
        Store.table_field_display= [];
        selectedItems.map(item => {
            Store.table_field_display.push(item["key"]);
            return true
        })
    };

    handleSearchFieldChange = selectedItems => {
        Store.search_field_display = [];
        selectedItems.map(item => {
            Store.search_field_display.push(item["key"])
            return true
        })
    };

    handleImExFieldChange = selectedItems => {
        Store.im_ex_port_field_display = [];
        selectedItems.map(item => {
            Store.im_ex_port_field_display.push(item["key"])
            return true
        })
    };

    handleTemplateChange = (e) => {
        Store.export_template_filename = e.target.value;
    };

    render() {
        const {getFieldDecorator} = this.props.form;

        // 表格展示字段
        let filterOptions = {};
        let filterOptionsInit = [];
        Object.keys(Store.fieldMap).map(key => {
           if (!Store.table_field_display.includes(key)){
               filterOptions[key] = Store.fieldMap[key];
           }else {
               filterOptionsInit.push({key:key,label:Store.fieldMap[key]})
           }
            return true
        });

        //可搜索的字段
        let filterOptionsSearch = {};
        let filterOptionsSearchInit = [];
        Object.keys(Store.fieldMap).map(key => {
            if (!Store.search_field_display.includes(key)){
                filterOptionsSearch[key] = Store.fieldMap[key];
            }else {
                filterOptionsSearchInit.push({key:key,label:Store.fieldMap[key]})
            }
            return true;
        });

        //可导入导出字段
        let filterOptionsImEx = {};
        let filterOptionsImExInit = [];
        Object.keys(Store.fieldMap).map(key => {
            if (!Store.im_ex_port_field_display.includes(key)){
                filterOptionsImEx[key] = Store.fieldMap[key];
            }else {
                filterOptionsImExInit.push({key:key,label:Store.fieldMap[key]})
            }
            return true;
        });

        return (
            <Fragment>
                <Alert closable showIcon type={"info"} message={"小提示"}
                       style={{width: 750,marginBottom:"10px", color: '#31708f !important'}}
                       description={"配置首页相关的展示字段，顺序决定了页面上展示的顺序"}
                />
                {Store.fieldMap && <Form>
                    <Form.Item label={"表格展示的字段"}>
                        {getFieldDecorator("table_field_display", {initialValue:filterOptionsInit,rules: [{required:true,message:"请选择表格需要展示的字段"}]})(
                            <Select
                                labelInValue
                                mode="multiple"
                                placeholder="选择表格需要展示的字段"
                                onChange={this.handleTableFieldChange}
                                style={{ width: '90%' }}
                            >
                                {Object.keys(filterOptions).map(key => (
                                    <Select.Option key={key}>
                                        {filterOptions[key]}
                                    </Select.Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>

                    <Form.Item label={"可搜索字段"}>
                        {getFieldDecorator("search_field_display", {initialValue: filterOptionsSearchInit,rules: []})(
                            <Select
                                labelInValue
                                mode="multiple"
                                placeholder="选择可搜索字段"
                                onChange={this.handleSearchFieldChange}
                                style={{ width: '90%' }}
                            >
                                {Object.keys(filterOptionsSearch).map(key => (
                                    <Select.Option key={key}>
                                        {filterOptionsSearch[key]}
                                    </Select.Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>

                    <Form.Item label={"可导入导出字段"}>
                        {getFieldDecorator("im_ex_field_display", {initialValue: filterOptionsImExInit,rules: []})(
                            <Select
                                labelInValue
                                mode="multiple"
                                placeholder="选择可导入导出字段"
                                onChange={this.handleImExFieldChange}
                                style={{ width: '90%' }}
                            >
                                {Object.keys(filterOptionsImEx).map(key => (
                                    <Select.Option key={key}>
                                        {filterOptionsImEx[key]}
                                    </Select.Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>

                    <Form.Item label={"导出模板文件名"}>
                        {getFieldDecorator("export_template_filename", {initialValue: Store.export_template_filename,rules: []})(
                            <Input placeholder="请输入导出模板文件名" style={{ width: '90%' }} onChange={this.handleTemplateChange}/>
                        )}
                    </Form.Item>
                </Form>}
            </Fragment>
        );
    }
}

export default IndexConfig;
